<style lang="less">
  #danti-detail {
    background: #3d3936 url(~@/assets/pcindex_bg.jpg) no-repeat;
    .search {
      margin: 2em 0 0 0;
      padding-bottom: 3em;
      text-align: center;
    }
    .house-detail {
      min-height: 600px;
      background: #f2f2fc;
      .title {
        width: 1100px;
        margin: 0 auto;
        padding: 2em 0 0 0;
      }
      .main-body {
        width: 1100px;
        margin: 0 auto;
        padding: 2em 0;
        min-height: 440px;
        display: flex;
        .carousel {
          width: 464px;
          margin-right: 23px;
          .carousel-content {
            height: 348px;
            width: 464px;
            background: #eee;
          }
          .ivu-carousel {
            width: 100%;
            height: 100%;
            .demo-carousel img {
              width: 464px;
              height: 348px;
            }
          }
          .arrow {
            display: flex;
            margin-top: 12px;
            .prev, .next {
              height: 75px;
              width: 23px;
              background: rgba(0, 0, 0, .5);
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fff;
            }
            .scroll {
              flex: 1 1 0;
              overflow: hidden;
              margin: 0 12px;
              background: #eeeeee;
              .scroll-thumbnail {
                white-space: nowrap;
                img {
                  margin-right: 12px;
                  width: 91px;
                  height: 75px;
                  opacity: 0.3;
                  &.active {
                    opacity: 1;
                  }
                }
              }
            }
          }
        }
        .main-info {
          flex: 1 1 0;
          border-top: solid 1px #fb8066;
          padding-top: 3em;
          dl {
            font-size: 100%;
          }
          dt {
            font-weight: 700;
            line-height: 24px;
            font-size: 20px;
            margin-bottom: .5em;
          }
          dd {
            line-height: 40px;
            font-size: 14px;
            display: flex;
            align-items: center;
            .phone {
              font-size: 30px;
              margin-right: .5em;
              color: #ff552e;
              font-weight: normal;
            }
            &.tip {
              color: red;
              img {
                width: 14px;
                height: 14px;
                vertical-align: middle;
                transform: translateY(-2px);
              }
            }
          }
          .priceRange {
            b {
              color: #ff552e;
              margin-right: 23px;
              em {
                margin-right: 6px;
                font-size: 36px;
                font-weight: bold;
                font-style: normal;
              }
            }
          }
        }
      }
      .wrapper {
        width: 1100px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        .content {
          width: 820px;
          padding-right: 42px;
          h2 {
            margin-top: 2em;
            margin-bottom: 1em;
          }
          .room-config {
            display: flex;
            flex-wrap: wrap;
            padding: 2em 0;
            .config {
              display: flex;
              flex-direction: column;
              width: 15%;
              margin-bottom: 2em;
              text-align: center;
              font-weight: bold;
              opacity: .25;
              filter: grayscale(100%);
              b {
                height: 60px;
                margin-bottom: 8px;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                  width: 60px;
                }
              }
              &[enable] {
                opacity: 1;
                filter: grayscale(0%);
              }
            }
          }
          .arround-describe {
            white-space: pre-wrap;
          }
        }
      }
    }
    .design-sketch {
      .list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        .img {
          width: 45%;
          min-width: 0;
          margin-bottom: 5em;
          height: 280px;
          overflow: hidden;
          display: flex;
          justify-content: center;
          img {
            max-height: 100%;
            display: block;
          }
        }
      }
    }
  }
</style>
<template>
  <div id="danti-detail">
    <Navigator></Navigator>
    <div class="search">
      <GlobalSearchInput tab="danti"></GlobalSearchInput>
    </div>
    <div class="house-detail">
      <div class="title">
        <h1>{{danti.name}}</h1>
        <p>{{danti.secondDescribe}}</p>
      </div>
      <div class="main-body">
        <div class="carousel">
          <div class="carousel-content">
            <Carousel v-if="carouselList.length>0" v-model="carouselIndex" @on-change="changeCarousel" autoplay
                      :autoplay-speed="5000">
              <Carousel-item v-for="(item, index) in carouselList" :key="Math.random()">
                <div class="demo-carousel">
                  <img v-if="item" :src="item"/>
                  <img v-else src="~@/assets/no_image.png" />
                </div>
              </Carousel-item>
            </Carousel>
          </div>
          <div class="arrow">
            <div class="prev" @click="prev">
              <Icon type="chevron-left"></Icon>
            </div>
            <div class="scroll" ref="thumbnail">
              <div class="scroll-thumbnail">
                <a href="javascript:void(0)" v-for="(item, index) in carouselList">
                  <img :src="item"
                       @click="carouselIndex=index"
                       :class="{active: carouselIndex === index}"
                       :key="index"/>
                </a>
              </div>
            </div>
            <div class="next" @click="next">
              <Icon type="chevron-right"></Icon>
            </div>
          </div>
        </div>

        <div class="main-info">
          <dl>
            <dt>{{danti.firstDescribe}}</dt>
            <dd class="priceRange">租　金：<b><em>{{danti.priceRange}}</em>元/月</b> 押一付三</dd>
            <dd>编　号：{{danti.houseNumber}}</dd>
            <dd>面　积：{{danti.totalArea}}</dd>
            <dd>地　铁：{{danti.subway}}</dd>
            <dd>户　型：{{danti.huXingType | huXingType}}</dd>
            <dd>楼　层：{{danti.type}}楼</dd>
            <dd>地　址：{{danti.address}}</dd>
            <dd>
              电　话：<b class="phone">{{danti.phone | phone}}</b> <span>{{danti.contactName}}</span>
            </dd>
            <dd class="tip">
              <Tooltip content="举报电话：135-5030-7626" placement="top-start">
                <img src="~@/assets/danti-detail-icon/tip.png">
                签约前切勿付 订金、押金、租金等一切费用！务必 实地看房，查验房东和房屋证件！
              </Tooltip>
            </dd>
          </dl>
        </div>

      </div>
      <div class="wrapper">
        <div class="content">
          <h2>房源配置</h2>
          <div class="room-config">
            <div class="config" :enable="roomConfig.windows">
              <b><img src="~@/assets/danti-detail-icon/windows.png"></b>
              窗户
            </div>
            <div class="config" :enable="roomConfig.balcony">
              <b><img src="~@/assets/danti-detail-icon/balcony.png"></b>
              阳台
            </div>
            <div class="config" :enable="roomConfig.toilet">
              <b><img src="~@/assets/danti-detail-icon/toilet.png"></b>
              卫生间
            </div>
            <div class="config" :enable="roomConfig.ac">
              <b><img src="~@/assets/danti-detail-icon/ac.png"></b>
              空调
            </div>
            <div class="config" :enable="roomConfig.bed">
              <b><img src="~@/assets/danti-detail-icon/bed.png"></b>
              床
            </div>
            <div class="config" :enable="roomConfig.bookdesk">
              <b><img src="~@/assets/danti-detail-icon/bookdesk.png"></b>
              书桌
            </div>
            <div class="config" :enable="roomConfig.chest">
              <b><img src="~@/assets/danti-detail-icon/chest.png"></b>
              椅子
            </div>
            <div class="config" :enable="roomConfig.chair">
              <b><img src="~@/assets/danti-detail-icon/chair.png"></b>
              沙发
            </div>
            <div class="config" :enable="roomConfig.tableLamp">
              <b><img src="~@/assets/danti-detail-icon/tableLamp.png"></b>
              台灯
            </div>
            <div class="config" :enable="roomConfig.tv">
              <b><img src="~@/assets/danti-detail-icon/tv.png"></b>
              电视
            </div>
            <div class="config" :enable="roomConfig.pothook">
              <b><img src="~@/assets/danti-detail-icon/pothook.png"></b>
              衣柜
            </div>
            <div class="config" :enable="roomConfig.mirror">
              <b><img src="~@/assets/danti-detail-icon/mirror.png"></b>
              镜子
            </div>
          </div>
          <h2>房源描述</h2>
          <div class="arround-describe">
            {{danti.arroundDiscribe}}
          </div>
          <h2>效果图</h2>
          <div class="design-sketch">
            <div class="list">
              <div class="img" v-for="item in carouselList.slice(1)">
                <img v-if="item" :src="item"/>
                <img v-else src="~@/assets/no_image.png" alt="">
              </div>
            </div>
          </div>
        </div>
        <RecommendSourceForNewHouse></RecommendSourceForNewHouse>
      </div>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>

<script>

  import api from '@/service/api'

  export default {
    components: {
      Navigator: require('@/components/Navigator.vue'),
      FilterCategory: require('@/components/FilterCategory.vue'),
      RecommendSourceForNewHouse: require('@/components/RecommendSourceForNewHouse.vue'),
      NewHouseDetailTrendPicsEchart: require('@/components/NewHouseDetailTrendPicsEchart.vue'),
      PageFooter: require('@/components/PageFooter/index.vue')
    },
    data () {
      return {
        keywords: '',
        id: this.$router.currentRoute.params.id,
        danti: {},
        carouselIndex: 0
      }
    },
    beforeRouteUpdate (to, from, next) {
      this.id = to.params.id
      this.search()
      next()
    },
    methods: {
      search () {
        api.danTiDetail(this.id).then((res) => {
          this.danti = _.get(res, 'data.danTiInfo')
        })
      },
      prev () {
        this.carouselIndex = this.carouselIndex - 1
        if (this.carouselIndex < 0) {
          this.carouselIndex = this.carouselList.length - 1
        }
      },
      next () {
        this.carouselIndex = this.carouselIndex + 1
        if (this.carouselIndex > this.carouselList.length - 1) {
          this.carouselIndex = 0
        }
      },
      changeCarousel () {
        Vue.nextTick(() => {
          let alinkList = this.$refs.thumbnail.getElementsByTagName('a')
          let currentAlink = alinkList[this.carouselIndex]
          if (!currentAlink) {
            return
          }
          let left = currentAlink.offsetLeft - currentAlink.offsetWidth * 2
          left = left > 0 ? left : 0
          this.$refs.thumbnail.scrollLeft = left
        })
      }
    },
    computed: {
      carouselList () {
        var arr = []
        _.forOwn(_.get(this.danti, 'houseImage'), (image, key) => {
          arr.push(image)
        })
        return arr
      },
      roomConfig () {
        if (_.get(this, 'danti.roomConfig')) {
          return this.danti.roomConfig
        }
        return {}
      }
    },
    mounted () {
      this.search()
    }
  }
</script>

